<template>
  <el-col :span="24">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      <el-breadcrumb-item>用户详情</el-breadcrumb-item>
    </el-breadcrumb>
  </el-col>
  <el-col :span="24">
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="username" label="用户名" width="150" />
      <el-table-column prop="email" label="电子邮箱"  width="200"/>
      <el-table-column prop="phone" label="联系方式"  width="200"/>
      <el-table-column prop="question" label="问题"  width="200"/>
      <el-table-column prop="answer" label="答案"  width="200"/>
      <el-table-column prop="role" label="角色"  width="200">
        <template #default="scope">
          <el-tag v-if="scope.row.role == 0" effect="dark" round>管理员</el-tag>
          <el-tag v-if="scope.row.role == 1" effect="light" round>普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="更新时间" />
    </el-table>

  </el-col>
  <el-col :span="24">
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[1, 2, 3, 4]"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-col>
</template>
<script>
import {find} from "../../api/user.js";
import {getCurrentInstance,onMounted} from "vue";

export default {
  name: "UserList"
  ,data(){
    return {
      tableData:[
        {
          "id": 1,
          "username": "admin",
          "email": "admin@happymall.com",
          "phone": "13800138000",
          "question": "问题",
          "answer": "答案",
          "role": 0,
          "createTime": "2016-11-06",
          "updateTime": "2017-04-04",
        },
      ]
      ,currentPage:1
      ,pageSize:2
      ,total:10
    }
  }
  ,methods:{
    async loadData(){
      let {data:data} = await find(this.currentPage,this.pageSize)
      console.log(data.data)
      this.tableData = data['data']['list']
      this.pageSize = data['data']['pageSize']
      this.currentPage = data['data']['pageNum']
      this.total = data['data']['total']
    }
    ,handleSizeChange(){
    }
    ,handleCurrentChange(currentPage){
      this.currentPage = currentPage
      this.loadData()
    }
  }
  ,setup(){
    let {ctx:ctx} = getCurrentInstance();
    onMounted(()=>{
      ctx.loadData()
    })
  }
}
</script>


<style scoped>
.el-col{
  margin-top:20px ;
}
</style>